//使用CommonJS模块化规范导入
const {add, sub} = require('./js/mathUtils.js')

//使用ES6的模块化规范导入
import {hello, name} from "./js/info.js";

console.log(add(1, 2))
hello()
const test = "hello shi jie";
console.log(test)

//依赖css文件
require("./css/nomal.css")

//依赖less文件
require("./css/special.less")
document.writeln("测试文字，less设置是否生效")

//==============================================================================
//使用vue进行开发
import Vue from 'vue'

/*
正常运行之后,我们来考虑另外一个问题:
    口如果我们希望将data中的数据显示在界面中,就必须是修改index.html
    口如果我们后面自定义了组件,也必须修改index.html来使用组件
    口但是html模板在之后的开发中,我并不希望手动的来频繁修改,是否可以做到呢?
定义template属性:
    口在前面的Vue实例中,我们定义了el属性,用于和index.html中的#app进行绑定,让Vue实例之后可以管理它其中的内容
    口这里,我们可以将div元素中的{{message}}内容删掉,只保留一个基本的id为div的元素
    口但是如果我依然希望在其中显示{{message}}的内容,应该怎么处理呢?
    口我们可以再定义一个template属性,代码如下:
    口template定义的模板内容会直接替换掉整个 <div id="app"></div> ，所以在浏览器中我们不再看到<div id="app"></div>这个标签
*/
/*
// 一、直接进行绑定标签使用
const app = new Vue({
    el: "#app",
    template: `
    <div>
        <h2>{{message}}</h2>
        <h2>{{name}}</h2>
    </div>
    `,
    data: {
        message: "hello word",
        name: "我的名字"
    }
})
*/

//--------------------------------------------------------------------------
/*
// 二 、抽离成组件的使用方式
// 抽离成组件的的方式，定义组件, （1）在使用地直接定义，直接进行使用
const App = {
    template: `
    <div>
        <h2>{{message}}</h2>
        <h2>{{name}}</h2>
    </div>
    `,
    data() {
        return {
            message: "hello word",
            name: "code view"
        }
    }
}

//抽离成组件的的方式，定义组件, （2）在其他文件定义，再引入使用
//上面这个抽离成组件的方式可以把组件放置在另一个文件中进行引入使用
import App from './vue/app.js'

//使用组件
const app = new Vue({
    el: "#app",
    //使用下面注册的App组件，替换掉index页面<div id="app"></div>标签，上面已经说了template的作用
    template: "<App></App>",
    //注册组件
    components: {
        App
    }
})
*/

//--------------------------------------------------------------------------
//导入（引入其他文件定义的组件）
import App from './vue/App.vue'
const app = new Vue({
    el: "#app",
    //使用下面注册的App组件，替换掉index页面<div id="app"></div>标签，上面已经说了template的作用
    template: "<App></App>",
    //注册组件
    components: {
        App
    }
})

